<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Asurada登录功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-section h2 {
            margin-top: 0;
            color: #4e5eff;
        }
        input, button {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background-color: #4e5eff;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #3a4ecc;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        pre {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Asurada登录功能测试报告</h1>
        
        <div class="test-section">
            <h2>测试环境准备</h2>
            <p>确保后端服务已在本地启动，端口为8082</p>
            <button onclick="checkBackendStatus()">检查后端服务状态</button>
            <div id="backendStatus" class="result"></div>
        </div>
        
        <div class="test-section">
            <h2>1. 正常的手机号密码登录测试</h2>
            <p>使用正确的手机号和密码进行登录测试</p>
            <input type="text" id="phone1" placeholder="手机号" value="13812345678">
            <input type="password" id="password1" placeholder="密码" value="password123">
            <button onclick="testNormalLogin()">测试正常登录</button>
            <div id="normalLoginResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h2>2. 验证码登录测试</h2>
            <p>使用手机号和验证码进行登录测试</p>
            <input type="text" id="phone2" placeholder="手机号" value="13812345678">
            <input type="text" id="code2" placeholder="验证码" value="123456">
            <button onclick="testCodeLogin()">测试验证码登录</button>
            <div id="codeLoginResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h2>3. 错误的手机号或密码登录测试</h2>
            <p>使用错误的手机号或密码进行登录测试</p>
            <input type="text" id="phone3" placeholder="手机号" value="13800000000">
            <input type="password" id="password3" placeholder="密码" value="wrongpassword">
            <button onclick="testWrongLogin()">测试错误登录</button>
            <div id="wrongLoginResult" class="result"></div>
        </div>
        
        <div class="test-section">
            <h2>4. 网络异常情况测试</h2>
            <p>模拟网络异常情况下的登录测试</p>
            <input type="text" id="phone4" placeholder="手机号" value="13812345678">
            <input type="password" id="password4" placeholder="密码" value="password123">
            <button onclick="testNetworkError()">测试网络异常</button>
            <div id="networkErrorResult" class="result"></div>
        </div>
    </div>

    <script>
        const BASE_URL = 'http://localhost:8082';
        
        // 检查后端服务状态
        async function checkBackendStatus() {
            const statusDiv = document.getElementById('backendStatus');
            try {
                const response = await fetch(`${BASE_URL}/asurada/api/status`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    statusDiv.innerHTML = '<div class="result success">后端服务运行正常</div>';
                } else {
                    statusDiv.innerHTML = '<div class="result error">后端服务未正常运行，请检查服务状态</div>';
                }
            } catch (error) {
                statusDiv.innerHTML = `<div class="result error">无法连接到后端服务: ${error.message}</div>`;
            }
        }
        
        // 正常登录测试
        async function testNormalLogin() {
            const phone = document.getElementById('phone1').value;
            const password = document.getElementById('password1').value;
            const resultDiv = document.getElementById('normalLoginResult');
            
            try {
                resultDiv.innerHTML = '<div class="result info">正在测试正常登录...</div>';
                
                // 第一步：获取登录授权码
                const authResponse = await fetch(`${BASE_URL}/asurada/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        account: phone,
                        password: password
                    })
                });
                
                if (!authResponse.ok) {
                    throw new Error(`获取授权码失败: ${authResponse.status}`);
                }
                
                const authData = await authResponse.json();
                console.log('第一步响应:', authData);
                
                if (authData.code !== 200) {
                    throw new Error(`获取授权码失败: ${authData.message}`);
                }
                
                // 第二步：使用授权码获取令牌
                const tokenResponse = await fetch(`${BASE_URL}/asurada/token`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        authCode: authData.data.authCode
                    })
                });
                
                if (!tokenResponse.ok) {
                    throw new Error(`获取令牌失败: ${tokenResponse.status}`);
                }
                
                const tokenData = await tokenResponse.json();
                console.log('第二步响应:', tokenData);
                
                if (tokenData.code === 200) {
                    resultDiv.innerHTML = `
                        <div class="result success">
                            <h3>正常登录测试成功</h3>
                            <p>访问令牌: ${tokenData.data.accessToken ? tokenData.data.accessToken.substring(0, 20) + '...' : 'N/A'}</p>
                            <p>刷新令牌: ${tokenData.data.refreshToken ? tokenData.data.refreshToken.substring(0, 20) + '...' : 'N/A'}</p>
                            <p>用户信息: ${tokenData.data.userInfo ? JSON.stringify(tokenData.data.userInfo) : 'N/A'}</p>
                            <pre>${JSON.stringify(tokenData, null, 2)}</pre>
                        </div>
                    `;
                } else {
                    throw new Error(`获取令牌失败: ${tokenData.message}`);
                }
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="result error">
                        <h3>正常登录测试失败</h3>
                        <p>错误信息: ${error.message}</p>
                    </div>
                `;
            }
        }
        
        // 验证码登录测试
        async function testCodeLogin() {
            const phone = document.getElementById('phone2').value;
            const code = document.getElementById('code2').value;
            const resultDiv = document.getElementById('codeLoginResult');
            
            try {
                resultDiv.innerHTML = '<div class="result info">正在测试验证码登录...</div>';
                
                const response = await fetch(`${BASE_URL}/asurada/loginByPhoneAndCode`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        phone: phone,
                        code: code
                    })
                });
                
                const data = await response.json();
                console.log('验证码登录响应:', data);
                
                if (data.code === 200) {
                    resultDiv.innerHTML = `
                        <div class="result success">
                            <h3>验证码登录测试成功</h3>
                            <p>访问令牌: ${data.data.token ? data.data.token.substring(0, 20) + '...' : 'N/A'}</p>
                            <p>用户信息: ${data.data.userInfo ? JSON.stringify(data.data.userInfo) : 'N/A'}</p>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </div>
                    `;
                } else {
                    throw new Error(data.message || '登录失败');
                }
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="result error">
                        <h3>验证码登录测试失败</h3>
                        <p>错误信息: ${error.message}</p>
                    </div>
                `;
            }
        }
        
        // 错误登录测试
        async function testWrongLogin() {
            const phone = document.getElementById('phone3').value;
            const password = document.getElementById('password3').value;
            const resultDiv = document.getElementById('wrongLoginResult');
            
            try {
                resultDiv.innerHTML = '<div class="result info">正在测试错误登录...</div>';
                
                // 第一步：获取登录授权码
                const authResponse = await fetch(`${BASE_URL}/asurada/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        account: phone,
                        password: password
                    })
                });
                
                const authData = await authResponse.json();
                console.log('错误登录第一步响应:', authData);
                
                if (authData.code !== 200) {
                    resultDiv.innerHTML = `
                        <div class="result success">
                            <h3>错误登录测试成功（预期失败）</h3>
                            <p>错误信息: ${authData.message}</p>
                            <pre>${JSON.stringify(authData, null, 2)}</pre>
                        </div>
                    `;
                    return;
                }
                
                // 如果第一步成功，继续第二步
                const tokenResponse = await fetch(`${BASE_URL}/asurada/token`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        authCode: authData.data.authCode
                    })
                });
                
                const tokenData = await tokenResponse.json();
                console.log('错误登录第二步响应:', tokenData);
                
                if (tokenData.code !== 200) {
                    resultDiv.innerHTML = `
                        <div class="result success">
                            <h3>错误登录测试成功（预期失败）</h3>
                            <p>错误信息: ${tokenData.message}</p>
                            <pre>${JSON.stringify(tokenData, null, 2)}</pre>
                        </div>
                    `;
                } else {
                    resultDiv.innerHTML = `
                        <div class="result error">
                            <h3>错误登录测试失败（不应成功）</h3>
                            <pre>${JSON.stringify(tokenData, null, 2)}</pre>
                        </div>
                    `;
                }
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="result error">
                        <h3>错误登录测试失败</h3>
                        <p>错误信息: ${error.message}</p>
                    </div>
                `;
            }
        }
        
        // 网络异常测试
        async function testNetworkError() {
            const phone = document.getElementById('phone4').value;
            const password = document.getElementById('password4').value;
            const resultDiv = document.getElementById('networkErrorResult');
            
            try {
                resultDiv.innerHTML = '<div class="result info">正在测试网络异常情况...</div>';
                
                // 使用一个不存在的地址来模拟网络异常
                const response = await fetch('http://localhost:9999/asurada/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        account: phone,
                        password: password
                    })
                });
                
                // 如果没有抛出异常，说明连接成功，这不是我们想要的结果
                resultDiv.innerHTML = `
                    <div class="result error">
                        <h3>网络异常测试失败（应该出现网络错误）</h3>
                    </div>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <div class="result success">
                        <h3>网络异常测试成功（预期失败）</h3>
                        <p>错误信息: ${error.message}</p>
                    </div>
                `;
            }
        }
    </script>
</body>
</html>
</content>